<template>
  <div class="dashboard-container">
    <div class="app-container">
      <Page-tools :show-before="true">
        <!-- 左侧内容 -->
        <span slot="before">共{{ page.total }}条数据</span>
        <!-- 右侧内容 -->
        <template v-slot:after>
          <el-button size="small" type="success">excel导入</el-button>
          <el-button size="small" type="danger">excel导出</el-button>
          <el-button size="small" type="primary" @click="showDialog = true"
            >新增员</el-button
          >
        </template>
      </Page-tools>

      <!-- 放置表格和分页 -->
      <!-- sortable="" 可排序 上下图标 -->
      <el-card v-loading="loading">
        <el-table border :data="list">
          <el-table-column type="index" label="序号" sortable="" />
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column prop="workNumber" label="工号" sortable="" />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            :formatter="formatEmployment"
            sortable=""
          />
          <el-table-column prop="departmentName" label="部门" sortable="" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable="">
            <!-- 作用域插槽 + 过滤器   -->
            <!-- <template slot-scope="obj">
             {{obj.row.timeOfEntry }}
            </template> -->
            <template v-slot="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="enableState" label="账户状态" sortable="">
            <template v-slot="{ row }">
              <!-- 根据当前状态来确定 是否打开开关 -->
              <el-switch
                :value="row.enableState === 1"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="{ row }">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.size"
            :current-page="page.page"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>

    <!-- 放置组件弹出层 -->
    <!-- sync 修饰符 是子组件去改变父组件数据的一个语法糖 -->
    <add-employee :showDialog.sync="showDialog"></add-employee>
  </div>
</template>

<script>
// // 获取员工综合列表 删除员工的接口 新增员工接口
import { getEmployeeList, delEmployee } from "@/api/employees";
import Employeenum from "@/api/constant/employees"; //引入员工的枚举对象
// 引入添加的弹出层组件
import addEmployee from "./component/add-employee";
export default {
  components: {
    addEmployee, //注册弹出层组件
  },
  data() {
    return {
      list: [], //接受的数组
      page: {
        page: 1,
        size: 10,
        total: 0, //总数
      },
      loading: false, //显示遮罩层
      showDialog: false, // 控制弹出层的显示与隐藏
    };
  },
  created() {
    this.getEmployeeList(); //获取员工综合列表
  },
  methods: {
    //获取员工综合列表
    async getEmployeeList() {
      try {
        this.loading = true; //发请求的时候 打开loading
        const { total, rows } = await getEmployeeList(this.page);
        this.page.total = total;
        this.list = rows;
        // console.log(rows);

        this.loading = false; //请求结束时 关闭loading
      } catch (error) {
        console.log(error);
      }
    },
    // 分页
    changePage(newPage) {
      this.page.page = newPage; //赋值最新的页码值
      this.getEmployeeList(); //刷新列表
    },
    // 格式化聘用形式
    formatEmployment(row, column, cellValue, index) {
      // console.log(cellValue); //打印的是当前的1
      // 要去找1对应的值
      const obj = Employeenum.hireType.find((item) => item.id === cellValue);
      // return 如果obj 不为空返回当前的对象 如果为空 返回未知
      return obj ? obj.value : "未知";
    },
    // 点击按钮删除员工  弹出框确定删除吗？
    async delEmployee(id) {
      try {
        await this.$confirm("确定删除该员工吗？");
        // 点击了确定
        await delEmployee(id);
        this.$message.success("删除数据成功");
        this.getEmployeeList(); //刷新列表重新获取数据
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style>
</style>
